<template>
  <div class="app-container">
    <!-- 条件搜索 -->
    <el-form
      ref="searchFormRef"
      :model="searchForm"
      label-width="68px"
      :inline="true"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="油企名称" prop="yname">
            <el-select
              v-model="searchForm.yname"
              placeholder="请选择油企"
              size="small"
              style="width: 190px"
            >
              <el-option label="油企1" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动编号" prop="number">
            <el-input
              v-model="searchForm.number"
              size="small"
              placeholder="请输入活动编号"
              style="width: 190px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动名称" prop="hname">
            <el-input
              v-model="searchForm.hname"
              size="small"
              placeholder="请输入活动名称"
              style="width: 190px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动状态" prop="status">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择状态"
              size="small"
              style="width: 190px"
              clearable
            >
              <el-option label="进行中" value="0"></el-option>
              <el-option label="已取消" value="1"></el-option>
              <el-option label="已结束" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="collapse">
        <el-col :span="6">
          <el-form-item label="活动时间" prop="time">
            <el-date-picker
              v-model="searchForm.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div></div>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" icon="el-icon-search">
          搜索
        </el-button></el-col
      >
      <el-col :span="1.5">
        <el-tooltip content="重置搜索条件" placement="top">
          <el-button
            type="primary"
            size="mini"
            @click="resetForm('searchFormRef')"
            plain
          >
            重置
          </el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="1.5">
        <el-button plain size="mini" @click="collapse = !collapse">
          {{ collapse ? "收起" : "展开更多" }}
          <i :class="collapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain size="mini" @click="handleAddOrEdit('add', {})">
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain>删除</el-button>
      </el-col>
    </el-row>

    <!-- 数据列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="活动编号" prop="no"> </el-table-column>
      <el-table-column
        label="活动名称"
        prop="name"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="消费油品"
        prop="yname"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="最低消费(元)"
        prop="minMoney"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="优惠券"
        prop="youhuiquan"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="活动状态"
        prop="status"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="活动时间"
        prop="date"
        width="300"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddOrEdit('edit', row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定取消当前活动吗"
            @onConfirm="handleConfirmActivity"
            @onCancel="handleCancelActivity"
          >
            <el-button slot="reference" size="mini">取消</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页(全局组件) -->
    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" />

    <!-- 添加或编辑弹框 -->
    <el-dialog :title="formTitle" :visible.sync="addOrEditVisible" width="40%">
      <el-form
        :model="activityRuleForm"
        :rules="activityRules"
        ref="fullActivityRuleForm"
        label-width="120px"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input
            v-model="activityRuleForm.name"
            autocomplete="off"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="消费油品" prop="yname">
          <el-select
            v-model="activityRuleForm.yname"
            placeholder="请选择消费油品"
            style="width: 400px"
          >
            <el-option label="油品1" value="1"></el-option>
            <el-option label="油品2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最低消费金额" prop="minMoney">
          <el-input
            v-model="activityRuleForm.minMoney"
            autocomplete="off"
            placeholder="请输入最低消费金额"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="date">
          <el-date-picker
            v-model="activityRuleForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            format="yyyy-MM-dd"
            style="width: 400px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="赠送优惠券" prop="youhuiquan">
          <el-select
            v-model="activityRuleForm.youhuiquan"
            placeholder="请选择优惠券"
            size="small"
            clearable
            style="width: 400px"
          >
            <el-option label="请选择优惠券" disabled value=""></el-option>
            <el-option label="优惠券1" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: end">
          <el-button @click="addOrEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm"> 确 定 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "FullActivity",
  components: {},
  data() {
    return {
      addOrEditVisible: false, // 控制添加或编辑弹框
      collapse: false, // 控制是否展开条件搜索项
      formTitle: "新增活动",
      total: 10,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        yname: "",
        number: "",
        hname: "",
        status: "",
        time: "",
      },
      tableData: [
        {
          no: 27,
          name: "活动名称活动名称活动名称活动名称活动名称活动名称活动名称",
          yname: "汽油95#",
          minMoney: "122.00元",
          youhuiquan: "优惠券",
          date: "2023-03-08 00:00:00 至 2023-04-11 00:00:00",
          status: "进行中",
        },
        {
          no: 24,
          name: "活动名称4444",
          yname: "汽油3333",
          minMoney: "43r 元",
          youhuiquan: "优惠券333",
          date: "2023-03-08 00:00:00 至 2023-04-11 00:00:00",
          status: "已结束",
        },
      ],
      // 添加编辑活动弹框表单字段
      activityRuleForm: {
        name: "",
        yname: "", // 油品
        minMoney: "", // 最低消费
        date: undefined, // 活动时间
        youhuiquan: undefined, // 优惠券
      },
      // 添加编辑活动弹框校验规则
      activityRules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        yname: [{ required: true, message: "请选择油品", trigger: "change" }],
        minMoney: [
          { required: true, message: "请输入最低消费金额", trigger: "blur" },
        ],
        date: [
          { required: true, message: "请选择活动时间", trigger: "change" },
        ],
        youhuiquan: [
          { required: true, message: "请选择赠送优惠券", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 选择多行表格数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 添加、编辑活动按钮
    handleAddOrEdit(type, rowdata) {
      if (type === "add") {
        // 使用全局方法重置表单
        this.resetForm("fullActivityRuleForm");
        this.formTitle = "新增活动";
        this.addOrEditVisible = true;
      } else {
        this.activityRuleForm = Object.assign(this.activityRuleForm, rowdata);
        this.formTitle = "编辑活动";
        this.addOrEditVisible = true;
      }
    },
    // 取消按钮
    handleCancel() {},
    // 保存提交表单
    submitForm() {
      this.$refs["fullActivityRuleForm"].validate((valid) => {
        if (valid) {
          console.log("submit!发请求");
          this.addOrEditVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 确认取消活动操作
    handleConfirmActivity() {
      this.msgSuccess("取消活动成功！");
    },

    // 取消 取消活动操作
    handleCancelActivity() {
      this.msgInfo("取消了取消活动");
    },
  },
};
</script>
<style scoped></style>
